<template>
	<div class="header-date-range relative">
		<div class="course-show-date" @click="handleChooseDate">
			<span class="font_time" :class="{active:dateRangeTime}">{{ dateRangeTime || text }}</span>
			<u-icon color="#131313" name="arrow-down-fill" size="12"></u-icon>
		</div>
	</div>
</template>

<script>
	import { formatDate } from "@/utils/tool";

	export default {
		emits: ["filter", "chooseDate", "update:start", "update:end", "change"],
		props: {
			showFilterBtn: {
				type: Boolean,
				default: () => true
			},
			text: {
				type: String,
				default: () => "选择时间"
			},
			start: {
				type: String,
				required: true
			},
			end: {
				type: String,
				required: true
			},
			dateEvent: {
				type: String,
				default: () => "",
			}
		},
		computed: {
			dateRangeTime() {
				const { start, end } = this
				if (!start || !end) return ""
				return `${formatDate(start)} - ${formatDate(end)}`
			}
		},
		methods: {
			handleChooseDateSuccess(ev) {
				if (!ev) return
				const { startDate, endDate } = ev
				this.$emit("update:start", startDate)
				this.$emit("update:end", endDate);
				this.$emit("change");
			},
			handleUseFilter() {
				this.$emit("filter")
			},
			handleChooseDate() {
				const { dateEvent, start, end } = this
				this.$emit('chooseDate', {
					start,
					end,
				})
			}
		},
		data() {
			return {}
		}
	}
</script>


<style lang="scss" scoped>
	.header-date-range {
		display: flex;
		align-items: center;
		position: relative;
		background: #fff;
		padding: 24rpx 32rpx;
		box-sizing: border-box;

		.filter_btn {
			display: flex;
			align-items: center;
			margin-left: auto;
			font-size: 0;

			.filter_text {
				font-size: 26rpx;
				color: #313848;
				margin-right: 4rpx;
			}

			.img_filter {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.course-show-date {
			flex: 1;
			max-width: 440rpx;
			padding: 16rpx 24rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #f8f8f8;
			//border: 2rpx solid #EAEAEA;

			.font_time {
				font-family: DIN Alternate, DIN Alternate, serif;
				font-weight: bold;
				font-size: 28rpx;
				color: #313848;
				line-height: 40rpx;
			}
		}
	}
</style>